<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('焊材库环境监测曲线')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
<!--        <div class="col-sm-12 search-collapse">-->
<!--            <form id="formId">-->
<!--                <div class="select-list">-->
<!--                    <ul>-->
<!--                        <li>-->
<!--                            <label>设备编号：</label>-->
<!--                            <input type="text" name="deviceNo" id="deviceNo"/>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a class="btn btn-primary btn-rounded btn-sm" onclick=""><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </form>-->
<!--        </div>-->
        <div class="col-sm-12" style="margin-top: 15px; background-color: #ffffff; border-radius: 6px; box-shadow: 1px 1px 3px #00000033">
            <div class="wrapper wrapper-content animated fadeInRight" style="padding: 0">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>冷却分厂一区1号焊材库实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="chartInstance211"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>冷却分厂二区1号焊材库实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="chartInstance221"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>冷却分厂二区2号焊材库实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="chartInstance222"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
let prefix = ctx + "device/state";
//定时器
let time1;

function dynamicChart(){
    let chartInstance211 = echarts.init(document.getElementById('chartInstance211'))
    let initOption211 = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
                color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        grid: {
            left: "6%",
            right: "1.5%",
            bottom: "10%"
        },
        legend: {
            top: 20,
            orient: 'horizontal',
            data: ['温度(℃)', '相对湿度(%RH)'],
            itemGap: 20,
            textStyle: {
                color: "#0000ff",
                fontSize: '14px',
                padding: [0, 0, 0, 10]
            },
            icon: "rect",
            itemWidth: 53,
            itemHeight: 2
        },
        // x轴数据
        xAxis: {
            type: 'category',
            data: ['09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00',
                '19:00:00', '20:00:00', '21:00:00', '22:00:00', '23:00:00', '00:00:00', '01:00:00', '02:00:00',
                '03:00:00', '04:00:00', '05:00:00', "06:00:00", '07:00:00', '08:00:00'
            ],
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },

        // y轴数据，有几个定义几个即可  position: "left",控制y轴的位置  offset: 60,控制y轴的偏移量
        yAxis: [{
            type: 'value',
            scale: true,
            position: "left",
            splitLine: {
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#F19D7E'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12
                }
            }
        },
            {
                type: 'value',
                //scale true 用来控制Y轴不从0开始
                scale: true,
                position: "left",
                offset: 30,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    inside: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.18)',
                        width: 1,
                        type: "solid"
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 12,
                        color: "#768AFF"
                    }
                }
            }
        ],
        // 有几个Y轴定义几个数据即可
        series: [{

            name: '温度(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            yAxisIndex: 0,
            symbolSize: 6,
            data: ['20', '21', '19', '20', '21', '20', '20', '19', '20', '20',
                '20', '20', '21', '20', '20', '18', '20', '20', '23', '20',
                '21', '20',
                '20', '22'
            ],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(14,41,105,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,255,255,0)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#21CBEE'
                }
            },
            lineStyle: {
                normal: {
                    width: 2
                }
            }
        },
            {

                name: '相对湿度(%RH)',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                yAxisIndex: 1,
                symbolSize: 6,
                data: ['55.2', '54.4', '53.6', '55.5', '56.8', '54.5', '55.2', '56.5', '57.6', '56.5',
                    '55.7', '55.5', '54.4', '54.6', '54.8', '54.9', '55.2', '55.1', '56.3', '56.5',
                    '54.4', '54.2',
                    '55.0', '54.6'
                ],
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(252,73,62,.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(252,73,62,0)'
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FFA480'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2
                    }
                }
            },
        ]
    };
    chartInstance211.setOption(initOption211);
    $(window).resize(chartInstance211.resize);



    let chartInstance221 = echarts.init(document.getElementById('chartInstance221'))
    let initOption221 = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
                color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        grid: {
            left: "6%",
            right: "1.5%",
            bottom: "10%"
        },
        legend: {
            top: 20,
            orient: 'horizontal',
            data: ['温度(℃)', '相对湿度(%RH)'],
            itemGap: 20,
            textStyle: {
                color: "#0000ff",
                fontSize: '14px',
                padding: [0, 0, 0, 10]
            },
            icon: "rect",
            itemWidth: 53,
            itemHeight: 2
        },
        // x轴数据
        xAxis: {
            type: 'category',
            data: ['09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00',
                '19:00:00', '20:00:00', '21:00:00', '22:00:00', '23:00:00', '00:00:00', '01:00:00', '02:00:00',
                '03:00:00', '04:00:00', '05:00:00', "06:00:00", '07:00:00', '08:00:00'
            ],
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },

        // y轴数据，有几个定义几个即可  position: "left",控制y轴的位置  offset: 60,控制y轴的偏移量
        yAxis: [{
            type: 'value',
            scale: true,
            position: "left",
            splitLine: {
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#F19D7E'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12
                }
            }
        },
            {
                type: 'value',
                //scale true 用来控制Y轴不从0开始
                scale: true,
                position: "left",
                offset: 30,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    inside: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.18)',
                        width: 1,
                        type: "solid"
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 12,
                        color: "#768AFF"
                    }
                }
            }
        ],
        // 有几个Y轴定义几个数据即可
        series: [{

            name: '温度(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            yAxisIndex: 0,
            symbolSize: 6,
            data: ['21', '21', '20', '21', '19', '20', '20', '19', '20', '20',
                '20', '20', '22', '20', '20', '18', '21', '20', '23', '20',
                '21', '19',
                '19', '22'
            ],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(14,41,105,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,255,255,0)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#21CBEE'
                }
            },
            lineStyle: {
                normal: {
                    width: 2
                }
            }
        },
            {

                name: '相对湿度(%RH)',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                yAxisIndex: 1,
                symbolSize: 6,
                data: ['55.2', '55.4', '53.6', '55.5', '56.8', '54.5', '53.2', '56.5', '57.6', '56.5',
                    '55.7', '55.5', '53.4', '54.6', '54.8', '55.9', '55.2', '55.1', '56.3', '56.5',
                    '55.4', '54.2',
                    '55.0', '54.6'
                ],
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(252,73,62,.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(252,73,62,0)'
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FFA480'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2
                    }
                }
            },
        ]
    };
    chartInstance221.setOption(initOption221);
    $(window).resize(chartInstance221.resize);




    let chartInstance222 = echarts.init(document.getElementById('chartInstance222'))
    let initOption222 = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
                color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        grid: {
            left: "6%",
            right: "1.5%",
            bottom: "10%"
        },
        legend: {
            top: 20,
            orient: 'horizontal',
            data: ['温度(℃)', '相对湿度(%RH)'],
            itemGap: 20,
            textStyle: {
                color: "#0000ff",
                fontSize: '14px',
                padding: [0, 0, 0, 10]
            },
            icon: "rect",
            itemWidth: 53,
            itemHeight: 2
        },
        // x轴数据
        xAxis: {
            type: 'category',
            data: ['09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00',
                '19:00:00', '20:00:00', '21:00:00', '22:00:00', '23:00:00', '00:00:00', '01:00:00', '02:00:00',
                '03:00:00', '04:00:00', '05:00:00', "06:00:00", '07:00:00', '08:00:00'
            ],
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },

        // y轴数据，有几个定义几个即可  position: "left",控制y轴的位置  offset: 60,控制y轴的偏移量
        yAxis: [{
            type: 'value',
            scale: true,
            position: "left",
            splitLine: {
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#F19D7E'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12
                }
            }
        },
            {
                type: 'value',
                //scale true 用来控制Y轴不从0开始
                scale: true,
                position: "left",
                offset: 30,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    inside: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.18)',
                        width: 1,
                        type: "solid"
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 12,
                        color: "#768AFF"
                    }
                }
            }
        ],
        // 有几个Y轴定义几个数据即可
        series: [{

            name: '温度(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            yAxisIndex: 0,
            symbolSize: 6,
            data: ['20', '21', '19', '21', '21', '20', '20', '19', '20', '20',
                '20', '20', '21', '20', '21', '18', '20', '20', '23', '20',
                '20', '20',
                '20', '19'
            ],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(14,41,105,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,255,255,0)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#21CBEE'
                }
            },
            lineStyle: {
                normal: {
                    width: 2
                }
            }
        },
            {

                name: '相对湿度(%RH)',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                yAxisIndex: 1,
                symbolSize: 6,
                data: ['55.2', '54.4', '53.6', '55.5', '55.8', '54.5', '55.2', '56.5', '57.6', '56.5',
                    '55.7', '54.5', '55.4', '54.6', '54.8', '55.9', '55.2', '55.1', '56.3', '56.5',
                    '55.4', '54.2',
                    '55.0', '54.6'
                ],
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(252,73,62,.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(252,73,62,0)'
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FFA480'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2
                    }
                }
            },
        ]
    };
    chartInstance222.setOption(initOption222);
    $(window).resize(chartInstance222.resize);




    return dynamicChart;
}


function post4Dynamic() {
    $.post(prefix + "/list", {deviceNo: "101"}, function(result) {
        console.log(result);
        if (result.code == web_status.SUCCESS) {
            dynamicChart();

        } else {
            $.modal.msgError(result.msg);
        }
    });
    return post4Dynamic;
}


$(function() {
    time1 = setInterval(post4Dynamic(), 10000);
});


</script>
</body>
</html>